<div data-dojo-attach-point="dialogContainer" class="filterDialogContainer flex-column dialog-content pentaho-padding-sm" data-dojo-attach-point="containerNode">
  <div data-dojo-attach-point="typeContainer" class="filterDialogTypeContainer">
    <div class="typeContainerStyled filterDialogHidden" data-dojo-attach-point="fieldPicklistContainer">
      <span class="filterDialogFieldPicklistText"
            data-dojo-attach-point="fieldPicklistSpan">!Field:!</span>
      <select data-dojo-attach-point="picklistFields" dojoAttachEvent="onchange:_fieldChanged">
      </select>
    </div>
    <div class="typeContainerStyled" data-dojo-attach-point="typePicklistContainer">
      <input type="radio" value="PICKLIST"
             name="filterType" data-dojo-attach-point="typePicklistInput"
             dojoAttachEvent="onclick:_filterTypeChanged">
      <span class="filterDialogTypePicklistText"
            data-dojo-attach-point="typePicklistSpan">!Select from a list!</span>
      <span class="filterDialogTypePicklistCombinationTypeLinksSpan">(<a dojoAttachEvent="onclick:_setInclusivePicklistFilter" data-dojo-attach-point="typePicklistCombinationTypeLinksIncludeLink">!Includes!</a>,&nbsp;<a dojoAttachEvent="onclick:_setExclusivePicklistFilter" data-dojo-attach-point="typePicklistCombinationTypeLinksExcludeLink">!Excludes!</a>)</span>
      <br/>
    </div>
    <div class="typeContainerStyled" data-dojo-attach-point="typeMatchContainer">
      <input type="radio" data-dojo-attach-point="typeMatchInput"
             value="MATCH" name="filterType"
             dojoAttachEvent="onclick:_filterTypeChanged">
      <span class="filterDialogTypeMatchText" data-dojo-attach-point="typeMatchSpan">!Match a specific string!</span>
      <br/>
    </div>
    <div class="typeContainerStyled" data-dojo-attach-point="typeDateRangeContainer">
      <input type="radio" data-dojo-attach-point="typeDateInput"
             value="DATERANGE" name="filterType"
             dojoAttachEvent="onclick:_filterTypeChanged">
      <span class="filterDialogTypeDateRangeText" data-dojo-attach-point="typeDateRangeSpan">!Select a range!</span>
      <br/>
    </div>
    <!--
    <input type="radio" id="filter-type-picklist" value="FILTER_PICKLIST"
           name="filterType" onchange="view.updateFilterType(this.value);">
    Select from a list
    <br>
    <input type="radio" id="filter-type-match" value="FILTER_MATCH"
           name="filterType" onchange="view.updateFilterType(this.value);">
    Match a specific string
    -->
  </div>
  <div data-dojo-attach-point="parameterContainer" class="filterDialogParameterContainer">
    <div data-dojo-attach-point="parameterNameLabel"></div>
    <input type="text" class="parameterNameInput" data-dojo-attach-point="parameterNameInput" data-dojo-type="dijit.form.TextBox"/>
  </div>
  <div data-dojo-attach-point="detailsContainer" class="filterDialogDetailsContainer">
    <div data-dojo-attach-point="picklistContainer"
         class="filterDialogPicklistContainer">
      <table class="filterPicklist" role="presentation">
        <col style="width: 250px">
        <col style="width: 50px">
        <col style="width: 250px">
        <tbody>
        <tr>
          <td>
            <span class="filterDialogPicklistHeadingText" data-dojo-attach-point="picklistHeadingSpan">!Choose values from list:!</span>
          </td>
          <td></td>
          <td>
            <span class="filterDialogPicklistCombinationTypeTitle" data-dojo-attach-point="picklistCombinationTypeSpan">!Currently!</span>
          </td>
        </tr>
        <tr class="secondRow">
          <td style="display: flex">
            <input type="text" class="filterDialogPicklistFindInput" data-dojo-type="dijit.form.TextBox" data-dojo-attach-point="picklistFindInput" dojoAttachEvent="onKeyPress:_picklistFindKeyPressed" style="flex-grow: 1;margin-left: 0px;margin-right: 10px;"/>
            <button class="pentaho-button findButton" data-dojo-attach-point="picklistFindButton" dojoAttachEvent="onclick:_filterPicklistByFindInput">!Find!</button>
          </td>
          <td>
          </td>
          <td>
            <select class="filterDialogPicklistCombinationType" data-dojo-attach-point="picklistCombinationType" style="width:100%">
              <option value="!AND!" data-dojo-attach-point="picklistCombinationTypeIncludeOption">!INCLUDE!</option>
              <option value="!AND_NOT!" data-dojo-attach-point="picklistCombinationTypeExcludeOption">!EXCLUDE!</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <select data-dojo-type="dijit.form.MultiSelect"
                    class="filterDialogPicklistSelect picklistAvailable"
                    data-dojo-attach-point="picklistAvailableValues" name="available"
                    dojoAttachEvent="onDblClick:_picklistAddSelected"
                    size="12"></select>
          </td>
          <td class="selectableListActions" valign="middle" align="center">
            <img dojoAttachEvent="onclick:_picklistAddSelected"
                 data-dojo-attach-point="picklistAddSelected"
                 class="filterDialogPicklistButton"
                 src="resources/web/images/filter_add_selected.png"
                 title="!Add Selected!"><br>
            <img dojoAttachEvent="onclick:_picklistRemoveSelected"
                 data-dojo-attach-point="picklistRemoveSelected"
                 class="filterDialogPicklistButton"
                 src="resources/web/images/filter_remove_selected.png"
                 title="!Remove Selected!"><br>
            <br><br>
            <img dojoAttachEvent="onclick:_picklistAddAll"
                 data-dojo-attach-point="picklistAddAll"
                 class="filterDialogPicklistButton"
                 src="resources/web/images/filter_add_all.png"
                 title="!Add All!"><br>
            <img dojoAttachEvent="onclick:_picklistRemoveAll"
                 data-dojo-attach-point="picklistRemoveAll"
                 class="filterDialogPicklistButton"
                 src="resources/web/images/filter_remove_all.png"
                 title="!Remove All!">
          </td>
          <td>
            <select data-dojo-type="dijit.form.MultiSelect"
                    class="filterDialogPicklistSelect picklistUsed"
                    data-dojo-attach-point="picklistUsedValues" name="used"
                    dojoAttachEvent="onDblClick:_picklistRemoveSelected"
                    size="12"></select>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div data-dojo-attach-point="matchContainer" class="filterDialogMatchContainer">
      <table>
        <div data-dojo-attach-point="matchFieldName">!Field name!</div>
        <div class="flex-row flex-column-sm" style="display: flex">
          <select data-dojo-attach-point="matchAggType" style="flex-grow: 1; min-width: 170px; max-width: 180px"></select>
          <select data-dojo-attach-point="matchComparator" class="filterDialogMatchComparator" dojoAttachEvent="onchange:_matchComparatorChanged" style="flex-grow: 1; min-width: 170px; max-width: 180px"></select>
          <input type="text" data-dojo-attach-point="matchValueInput" size="10" style="flex-grow: 1; min-width: 170px; max-width: 180px"/><!--data-dojo-type="dijit.form.TextBox"-->
        </div>
        <!-- Date pattern to match what metadata expects. -->
        <!-- TODO Change this to locale-specific for presentation layer? -->
        <input type="text" data-dojo-attach-point="matchValueInputDate" data-dojo-type="pentaho.common.DateTextBox" constraints="{datePattern:'yyyy-MM-dd'}"/>
      </table>
    </div>
    <div data-dojo-attach-point="dateRangeContainer" class="filterDialogDateRangeContainer">
      <div data-dojo-attach-point="dateRangeFieldName">!Field name!</div>
      <select data-dojo-attach-point="dateRangeComparator" dojoAttachEvent="onchange:_dateRangeComparatorChanged"></select>
      <!-- Date pattern to match what metadata expects. -->
      <!-- TODO Change this to locale-specific for presentation layer? -->
      <input type="text" data-dojo-attach-point="dateRangeValueInputDate1" data-dojo-type="pentaho.common.DateTextBox" constraints="{datePattern:'yyyy-MM-dd'}"/>
      <span data-dojo-attach-point="dateRangeBetweenSeparatorSpan">!and!</span>
      <input type="text" data-dojo-attach-point="dateRangeValueInputDate2" data-dojo-type="pentaho.common.DateTextBox" constraints="{datePattern:'yyyy-MM-dd'}"/>
    </div>
  </div>
  <div data-dojo-attach-point="errorDialog" data-dojo-type="pentaho.common.MessageBox" style="width: 300px"/>
</div>